<template>
	<view class="container">
		<fu-navbar title="选择备件" bgColor="#0f68f0" color="#fff" isBackText></fu-navbar>
		<view class="search-wrap">
			<view class="search-box">
				<image class="search" src="../../../static/images/search-0.png" mode="widthFix"></image>
				<input placeholder="设备名称/编码/位置/型号" placeholder-class="pla-ipt" class="ipt" v-model="emName" @confirm="search" />
				<view class="btn" @click="search">搜索</view>
			</view>
		</view>
		<view class="padding-tb-16 padding-lr-24 fs-28">共{{total}}台设备</view>
		<view class="list">
			<view class="item fs-28" v-for="(item, index) in list" :key="index" @click="select(item, index)">
				<view class="flex align-center">
					<view class="flex-1 over-hidden flex align-center">
						<image src="../../../static/images/select-action.png" class="select" mode="aspectFill" v-if="item.checked"></image>
						<image src="../../../static/images/select.png" class="select" mode="aspectFill" v-else></image>
						<view class="name text-ellipsis">{{item.name}}</view>
					</view>
					<view class="fs-32 flex-shrink">剩余：{{item.stock}}</view>
				</view>
				<view class="flex margin-t-24 padding-tb-16 fs-28">
					<image src="../../../static/images/no-img.png" class="img" mode="aspectFill"></image>
					<view class="info">
						<view class="">编码：{{item.code}}</view>
						<view class="padding-tb-24">分类：{{item.brand}}</view>
						<view class="">规格型号：{{item.specs}}</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" v-if="list.length > 5"></uni-load-more>
		
		<!-- 空数据显示 -->
		<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
		
		<view class="btn-wrap">
			<view class="btn" @click="submit">确认</view>
		</view>
	</view>
</template>

<script>
import fuNavbar from '@/components/fu-navbar/fu-navbar.vue';
import fuEmptyUi from '@/components/fu-empty-ui/fu-empty-ui.vue';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
export default {
	components: {
		fuNavbar,
		fuEmptyUi,
		uniLoadMore
	},
	data() {
		return {
			list: [],
			isInit: false,
			page: 1,
			status: 'more',
			emName: '',
			total: 0,
			id: '',
			info: {},
			isClick: false
		}
	},
	onLoad() {
		this.getList();
	},
	onPullDownRefresh() {
		this.status = 'more';
		this.page = 1;
		this.getList();
	},
	onReachBottom() {
		if (this.status == 'more') {
			this.getList();
		}
	},
	methods: {
		getList() {
			if (this.status != 'more') return;
			this.status = 'loading';
			this.$api.post(global.apiUrls.selectPart, {
				pageNum: this.page,
				pageSize: 10,
				codeOrName: this.emName
			}).then(res => {
				if (res.data.code == 9100) {
					let total = res.data.info.total
					this.total = total
					let data = res.data.info.rows
					data.forEach(item => {
						item.checked = false
					})
					if (this.page == 1) this.list = [];
					this.list = this.list.concat(data)
					if (this.list.length < total) {
						this.status = 'more';
						this.page++;
					} else {
						this.status = 'noMore';
					}
				}
				this.isInit = true;
				uni.stopPullDownRefresh();
			}).catch(() => {
				uni.stopPullDownRefresh();
			})
		},
		search() {
			this.status = 'more';
			this.page = 1;
			this.getList();
		},
		select(item, i) {
			this.list[i].checked = !this.list[i].checked
		},
		submit() {
			if (this.isClick) return;
			let arr = []
			this.list.forEach(item => {
				if (item.checked) {
					arr.push(item)
				}
			})
			if (arr.length == 0) {
				uni.showToast({
					title: '请选择设备',
					icon: 'none'
				})
				return
			}
			this.isClick = true
			uni.$emit('getPart', arr)
			setTimeout(() => {
				uni.navigateBack()
			}, 800)
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background-color: #f3f5f8;
}
.search-wrap {
	padding: 16rpx 24rpx;
	.search-box {
		display: flex;
		align-items: center;
		background: #fff;
		border-radius: 8rpx;
		padding: 8rpx 0;
		.search {
			width: 38rpx;
			margin: 0 20rpx;
			flex-shrink: 0;
		}
		.ipt {
			color: #333;
			font-size: 28rpx;
			flex: 1;
		}
		.pla-ipt {
			color: #b6b6b6;
		}
		.btn {
			flex-shrink: 0;
			width: 108rpx;
			height: 56rpx;
			border-radius: 56rpx;
			background-color: #1c91ff;
			color: #fff;
			text-align: center;
			line-height: 56rpx;
			font-size: 28rpx;
			margin-right: 8rpx;
		}
	}
}
.select {
	width: 44rpx;
	height: 44rpx;
	margin-right: 24rpx;
	flex-shrink: 0;
}
.list {
	.item {
		background-color: #fff;
		border-radius: 16rpx;
		margin-bottom: 24rpx;
		padding: 24rpx;
		.name {
			font-size: 38rpx;
			font-weight: bold;
		}
		.img {
			width: 160rpx;
			height: 160rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
		}
		.info {
			flex: 1;
			overflow: hidden;
			font-size: 32rpx;
		}
	}
}
.btn-wrap {
	height: 138rpx;
	.btn {
		position: fixed;
		bottom: 30rpx;
		width: 88%;
		left: 0;
		right: 0;
		margin: 0 auto;
		height: 98rpx;
		background-color: #007aff;
		text-align: center;
		line-height: 98rpx;
		text-align: center;
		font-size: 38rpx;
		color: #fff;
		border-radius: 12rpx;
		z-index: 9;
	}
}
</style>